<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章管理API测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .result {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            white-space: pre-wrap;
            font-family: monospace;
            max-height: 300px;
            overflow-y: auto;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        input, select {
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .success {
            color: #28a745;
        }
        .error {
            color: #dc3545;
        }
    </style>
</head>
<body>
    <h1>文章管理API测试</h1>
    
    <div class="container">
        <h2>API连接测试</h2>
        <button onclick="testApiConnection()">测试API连接</button>
        <div id="apiResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章统计</h2>
        <button onclick="getStatistics()">获取统计信息</button>
        <div id="statisticsResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章列表</h2>
        <button onclick="getArticles()">获取所有文章</button>
        <div id="articlesResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章查询</h2>
        <input type="text" id="searchKeyword" placeholder="搜索关键词">
        <select id="searchStatus">
            <option value="">所有状态</option>
            <option value="published">已发布</option>
            <option value="draft">草稿</option>
            <option value="offline">下线</option>
        </select>
        <button onclick="getArticlesWithQuery()">查询文章</button>
        <div id="queryResult" class="result"></div>
    </div>

    <div class="container">
        <h2>创建文章</h2>
        <input type="text" id="articleTitle" placeholder="文章标题" value="测试文章">
        <input type="text" id="articleContent" placeholder="文章内容" value="这是一篇测试文章的内容...">
        <input type="text" id="articleSummary" placeholder="文章摘要" value="测试文章摘要">
        <select id="articleCategory">
            <option value="11111111-1111-1111-1111-111111111111">技术文章</option>
            <option value="22222222-2222-2222-2222-222222222222">新闻资讯</option>
            <option value="33333333-3333-3333-3333-333333333333">教程指南</option>
        </select>
        <button onclick="createArticle()">创建文章</button>
        <div id="createResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章操作</h2>
        <input type="text" id="articleId" placeholder="文章ID">
        <button onclick="getArticleById()">获取文章详情</button>
        <button onclick="publishArticle()">发布文章</button>
        <button onclick="offlineArticle()">下线文章</button>
        <button onclick="setTopStatus()">设置置顶</button>
        <button onclick="setRecommendStatus()">设置推荐</button>
        <button onclick="deleteArticle()">删除文章</button>
        <div id="operationResult" class="result"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:5095/api';
        
        async function testApiConnection() {
            const resultDiv = document.getElementById('apiResult');
            try {
                const response = await fetch(`${API_BASE_URL}/article/statistics`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ API连接成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `<span class="error">✗ API连接失败: ${response.status} ${response.statusText}</span>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 连接错误: ${error.message}</span>`;
            }
        }

        async function getStatistics() {
            const resultDiv = document.getElementById('statisticsResult');
            try {
                const response = await fetch(`${API_BASE_URL}/article/statistics`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `获取统计信息失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function getArticles() {
            const resultDiv = document.getElementById('articlesResult');
            try {
                const response = await fetch(`${API_BASE_URL}/article/list`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `获取文章列表失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function getArticlesWithQuery() {
            const resultDiv = document.getElementById('queryResult');
            const keyword = document.getElementById('searchKeyword').value;
            const status = document.getElementById('searchStatus').value;
            
            try {
                const params = new URLSearchParams();
                if (keyword) params.append('title', keyword);
                if (status) params.append('status', status);
                
                const response = await fetch(`${API_BASE_URL}/article/list?${params}`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `查询文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function createArticle() {
            const resultDiv = document.getElementById('createResult');
            const title = document.getElementById('articleTitle').value;
            const content = document.getElementById('articleContent').value;
            const summary = document.getElementById('articleSummary').value;
            const categoryId = document.getElementById('articleCategory').value;
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/create`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        title: title,
                        content: content,
                        summary: summary,
                        categoryId: categoryId,
                        tags: '测试,API',
                        authorId: '00000000-0000-0000-0000-000000000000',
                        authorName: '测试用户'
                    })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 文章创建成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    const errorText = await response.text();
                    resultDiv.innerHTML = `<span class="error">✗ 创建文章失败: ${response.status} ${response.statusText}</span>\n${errorText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 错误: ${error.message}</span>`;
            }
        }

        async function getArticleById() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `获取文章详情失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function publishArticle() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/publish`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 文章发布成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `发布文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function offlineArticle() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/offline`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 文章下线成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `下线文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function setTopStatus() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/top?isTop=true`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 设置置顶成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `设置置顶失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function setRecommendStatus() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/recommend?isRecommend=true`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 设置推荐成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `设置推荐失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function deleteArticle() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            if (!confirm('确定要删除这篇文章吗？')) {
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}`, {
                    method: 'DELETE'
                });
                
                if (response.ok) {
                    resultDiv.innerHTML = `<span class="success">✓ 文章删除成功</span>`;
                } else {
                    resultDiv.innerHTML = `删除文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        // 页面加载时自动测试API连接
        window.onload = function() {
            testApiConnection();
        };
    </script>
</body>
</html> 
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章管理API测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .result {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            white-space: pre-wrap;
            font-family: monospace;
            max-height: 300px;
            overflow-y: auto;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        input, select {
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .success {
            color: #28a745;
        }
        .error {
            color: #dc3545;
        }
    </style>
</head>
<body>
    <h1>文章管理API测试</h1>
    
    <div class="container">
        <h2>API连接测试</h2>
        <button onclick="testApiConnection()">测试API连接</button>
        <div id="apiResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章统计</h2>
        <button onclick="getStatistics()">获取统计信息</button>
        <div id="statisticsResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章列表</h2>
        <button onclick="getArticles()">获取所有文章</button>
        <div id="articlesResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章查询</h2>
        <input type="text" id="searchKeyword" placeholder="搜索关键词">
        <select id="searchStatus">
            <option value="">所有状态</option>
            <option value="published">已发布</option>
            <option value="draft">草稿</option>
            <option value="offline">下线</option>
        </select>
        <button onclick="getArticlesWithQuery()">查询文章</button>
        <div id="queryResult" class="result"></div>
    </div>

    <div class="container">
        <h2>创建文章</h2>
        <input type="text" id="articleTitle" placeholder="文章标题" value="测试文章">
        <input type="text" id="articleContent" placeholder="文章内容" value="这是一篇测试文章的内容...">
        <input type="text" id="articleSummary" placeholder="文章摘要" value="测试文章摘要">
        <select id="articleCategory">
            <option value="11111111-1111-1111-1111-111111111111">技术文章</option>
            <option value="22222222-2222-2222-2222-222222222222">新闻资讯</option>
            <option value="33333333-3333-3333-3333-333333333333">教程指南</option>
        </select>
        <button onclick="createArticle()">创建文章</button>
        <div id="createResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章操作</h2>
        <input type="text" id="articleId" placeholder="文章ID">
        <button onclick="getArticleById()">获取文章详情</button>
        <button onclick="publishArticle()">发布文章</button>
        <button onclick="offlineArticle()">下线文章</button>
        <button onclick="setTopStatus()">设置置顶</button>
        <button onclick="setRecommendStatus()">设置推荐</button>
        <button onclick="deleteArticle()">删除文章</button>
        <div id="operationResult" class="result"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:5095/api';
        
        async function testApiConnection() {
            const resultDiv = document.getElementById('apiResult');
            try {
                const response = await fetch(`${API_BASE_URL}/article/statistics`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ API连接成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `<span class="error">✗ API连接失败: ${response.status} ${response.statusText}</span>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 连接错误: ${error.message}</span>`;
            }
        }

        async function getStatistics() {
            const resultDiv = document.getElementById('statisticsResult');
            try {
                const response = await fetch(`${API_BASE_URL}/article/statistics`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `获取统计信息失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function getArticles() {
            const resultDiv = document.getElementById('articlesResult');
            try {
                const response = await fetch(`${API_BASE_URL}/article/list`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `获取文章列表失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function getArticlesWithQuery() {
            const resultDiv = document.getElementById('queryResult');
            const keyword = document.getElementById('searchKeyword').value;
            const status = document.getElementById('searchStatus').value;
            
            try {
                const params = new URLSearchParams();
                if (keyword) params.append('title', keyword);
                if (status) params.append('status', status);
                
                const response = await fetch(`${API_BASE_URL}/article/list?${params}`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `查询文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function createArticle() {
            const resultDiv = document.getElementById('createResult');
            const title = document.getElementById('articleTitle').value;
            const content = document.getElementById('articleContent').value;
            const summary = document.getElementById('articleSummary').value;
            const categoryId = document.getElementById('articleCategory').value;
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/create`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        title: title,
                        content: content,
                        summary: summary,
                        categoryId: categoryId,
                        tags: '测试,API',
                        authorId: '00000000-0000-0000-0000-000000000000',
                        authorName: '测试用户'
                    })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 文章创建成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    const errorText = await response.text();
                    resultDiv.innerHTML = `<span class="error">✗ 创建文章失败: ${response.status} ${response.statusText}</span>\n${errorText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 错误: ${error.message}</span>`;
            }
        }

        async function getArticleById() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `获取文章详情失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function publishArticle() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/publish`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 文章发布成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `发布文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function offlineArticle() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/offline`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 文章下线成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `下线文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function setTopStatus() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/top?isTop=true`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 设置置顶成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `设置置顶失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function setRecommendStatus() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/recommend?isRecommend=true`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 设置推荐成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `设置推荐失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function deleteArticle() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            if (!confirm('确定要删除这篇文章吗？')) {
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}`, {
                    method: 'DELETE'
                });
                
                if (response.ok) {
                    resultDiv.innerHTML = `<span class="success">✓ 文章删除成功</span>`;
                } else {
                    resultDiv.innerHTML = `删除文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        // 页面加载时自动测试API连接
        window.onload = function() {
            testApiConnection();
        };
    </script>
</body>
</html> 
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章管理API测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .result {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            white-space: pre-wrap;
            font-family: monospace;
            max-height: 300px;
            overflow-y: auto;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        input, select {
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .success {
            color: #28a745;
        }
        .error {
            color: #dc3545;
        }
    </style>
</head>
<body>
    <h1>文章管理API测试</h1>
    
    <div class="container">
        <h2>API连接测试</h2>
        <button onclick="testApiConnection()">测试API连接</button>
        <div id="apiResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章统计</h2>
        <button onclick="getStatistics()">获取统计信息</button>
        <div id="statisticsResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章列表</h2>
        <button onclick="getArticles()">获取所有文章</button>
        <div id="articlesResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章查询</h2>
        <input type="text" id="searchKeyword" placeholder="搜索关键词">
        <select id="searchStatus">
            <option value="">所有状态</option>
            <option value="published">已发布</option>
            <option value="draft">草稿</option>
            <option value="offline">下线</option>
        </select>
        <button onclick="getArticlesWithQuery()">查询文章</button>
        <div id="queryResult" class="result"></div>
    </div>

    <div class="container">
        <h2>创建文章</h2>
        <input type="text" id="articleTitle" placeholder="文章标题" value="测试文章">
        <input type="text" id="articleContent" placeholder="文章内容" value="这是一篇测试文章的内容...">
        <input type="text" id="articleSummary" placeholder="文章摘要" value="测试文章摘要">
        <select id="articleCategory">
            <option value="11111111-1111-1111-1111-111111111111">技术文章</option>
            <option value="22222222-2222-2222-2222-222222222222">新闻资讯</option>
            <option value="33333333-3333-3333-3333-333333333333">教程指南</option>
        </select>
        <button onclick="createArticle()">创建文章</button>
        <div id="createResult" class="result"></div>
    </div>

    <div class="container">
        <h2>文章操作</h2>
        <input type="text" id="articleId" placeholder="文章ID">
        <button onclick="getArticleById()">获取文章详情</button>
        <button onclick="publishArticle()">发布文章</button>
        <button onclick="offlineArticle()">下线文章</button>
        <button onclick="setTopStatus()">设置置顶</button>
        <button onclick="setRecommendStatus()">设置推荐</button>
        <button onclick="deleteArticle()">删除文章</button>
        <div id="operationResult" class="result"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:5095/api';
        
        async function testApiConnection() {
            const resultDiv = document.getElementById('apiResult');
            try {
                const response = await fetch(`${API_BASE_URL}/article/statistics`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ API连接成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `<span class="error">✗ API连接失败: ${response.status} ${response.statusText}</span>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 连接错误: ${error.message}</span>`;
            }
        }

        async function getStatistics() {
            const resultDiv = document.getElementById('statisticsResult');
            try {
                const response = await fetch(`${API_BASE_URL}/article/statistics`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `获取统计信息失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function getArticles() {
            const resultDiv = document.getElementById('articlesResult');
            try {
                const response = await fetch(`${API_BASE_URL}/article/list`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `获取文章列表失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function getArticlesWithQuery() {
            const resultDiv = document.getElementById('queryResult');
            const keyword = document.getElementById('searchKeyword').value;
            const status = document.getElementById('searchStatus').value;
            
            try {
                const params = new URLSearchParams();
                if (keyword) params.append('title', keyword);
                if (status) params.append('status', status);
                
                const response = await fetch(`${API_BASE_URL}/article/list?${params}`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `查询文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function createArticle() {
            const resultDiv = document.getElementById('createResult');
            const title = document.getElementById('articleTitle').value;
            const content = document.getElementById('articleContent').value;
            const summary = document.getElementById('articleSummary').value;
            const categoryId = document.getElementById('articleCategory').value;
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/create`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        title: title,
                        content: content,
                        summary: summary,
                        categoryId: categoryId,
                        tags: '测试,API',
                        authorId: '00000000-0000-0000-0000-000000000000',
                        authorName: '测试用户'
                    })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 文章创建成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    const errorText = await response.text();
                    resultDiv.innerHTML = `<span class="error">✗ 创建文章失败: ${response.status} ${response.statusText}</span>\n${errorText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 错误: ${error.message}</span>`;
            }
        }

        async function getArticleById() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}`);
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = JSON.stringify(data, null, 2);
                } else {
                    resultDiv.innerHTML = `获取文章详情失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function publishArticle() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/publish`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 文章发布成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `发布文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function offlineArticle() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/offline`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 文章下线成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `下线文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function setTopStatus() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/top?isTop=true`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 设置置顶成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `设置置顶失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function setRecommendStatus() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}/recommend?isRecommend=true`, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `<span class="success">✓ 设置推荐成功</span>\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.innerHTML = `设置推荐失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        async function deleteArticle() {
            const resultDiv = document.getElementById('operationResult');
            const articleId = document.getElementById('articleId').value;
            
            if (!articleId) {
                resultDiv.innerHTML = '请输入文章ID';
                return;
            }
            
            if (!confirm('确定要删除这篇文章吗？')) {
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/article/${articleId}`, {
                    method: 'DELETE'
                });
                
                if (response.ok) {
                    resultDiv.innerHTML = `<span class="success">✓ 文章删除成功</span>`;
                } else {
                    resultDiv.innerHTML = `删除文章失败: ${response.status} ${response.statusText}`;
                }
            } catch (error) {
                resultDiv.innerHTML = `错误: ${error.message}`;
            }
        }

        // 页面加载时自动测试API连接
        window.onload = function() {
            testApiConnection();
        };
    </script>
</body>
</html> 